<template>
	<view class="settle-container">
		<z-paging ref="pagingRef" :show-refresher-when-reload="true" :show-scrollbar="false">
		<template #top>
			<!-- 固定头部 -->
			<view class="fixed-header">
				<view class="status_bar" style="height: var(--status-bar-height); width: 100%;"></view>
				<tn-navbar home-icon="" :bottom-shadow="false" bg-color="transparent" :before-back="back">
					<view class="modern-navbar-title">
						<tn-icon name="check-circle" size="36" color="#00b894"/>
						<text class="title-text">确认订单</text>
						<view class="title-decoration"></view>
					</view>
				</tn-navbar>
			</view>
		</template>

		<!-- 主要内容区域 -->
		<view class="content-container">
			<!-- 收货地址卡片 -->
			<view class="modern-card address-card" @click="doGetAddress">
				<view class="card-header">
					<view class="header-left">
						<text class="card-title">收货地址</text>
					</view>
					<tn-icon name="right" size="28" color="#999"/>
				</view>
				<view class="card-content tn-pt-sm">
					<view class="address-info" v-if="shopClientInfoData.recemanname">
						<view class="contact-line">
							<view class="contact-detail">
								<text class="contact-name">{{shopClientInfoData.recemanname}}</text>
								<text class="contact-phone">{{shopClientInfoData.recetelephone}}</text>
							</view>
						</view>
						<text class="address-text">{{shopClientInfoData.address}}</text>
					</view>
					<view class="empty-state" v-else>
						<tn-icon name="add-circle" size="48" color="#cbd5e0"/>
						<text class="empty-text">点击添加收货地址</text>
					</view>
				</view>
			</view>

			<!-- 到货地址卡片 -->
			<view class="modern-card address-card" @click="doGetDHAddress" v-show="dhinfo">
				<view class="card-header">
					<view class="header-left">
						<text class="card-title">到货地址</text>
					</view>
					<tn-icon name="right" size="28" color="#999"/>
				</view>
				<view class="card-content">
					<view class="address-info">
						<view class="contact-line">
							<view class="contact-detail">
								<text class="contact-name">{{shopClientInfoData.dhrecemanname}}</text>
								<text class="contact-phone">{{shopClientInfoData.dhrecetelephone}}</text>
							</view>
						</view>
						<text class="address-text">{{shopClientInfoData.dhaddress}}</text>
					</view>
				</view>
			</view>

			<!-- 已选品种卡片 -->
			<view class="modern-card products-card">
				<view class="card-header">
					<view class="header-left">
						<text class="card-title">已选品种</text>
					</view>
					<view class="count-badge">
						<text>{{selectedDetails.length}}件</text>
					</view>
				</view>
				<view class="card-content">
					<view class="products-grid" v-if="selectedDetails.length > 0">
						<view 
							class="product-tag" 
							v-for="(item, index) in selectedDetails" 
							:key="index"
						>
							<text class="product-name">{{item?.goodsname || ''}}</text>
						</view>
					</view>
					<view class="empty-state" v-else>
						<tn-icon name="inbox" size="48" color="#cbd5e0"/>
						<text class="empty-text">暂无选择商品</text>
					</view>
				</view>
			</view>
			
			<!-- 单据属性卡片 -->
			<view class="modern-card settings-card" v-show="billinfo">
				<view class="card-header">
					<view class="header-left">
						<text class="card-title">单据属性</text>
					</view>
				</view>
				<view class="card-content">
					<view class="switches-grid">
						<view class="switch-item">
							<tn-switch v-model="isAllBill" active-value="1" inactive-value="0" active-text="合单发货" inactive-text="一单发货" class="modern-switch"/>
						</view>
						<view class="switch-item">
							<tn-switch v-model="isPreBill" active-value="1" inactive-value="0" active-text="预收订单" inactive-text="正常订单" class="modern-switch"/>
						</view>
						<view class="switch-item">
							<tn-switch v-model="isLogistics" active-value="1" inactive-value="0" active-text="物流到付" inactive-text="运费现结" class="modern-switch"/>
						</view>
						<view class="switch-item">
							<tn-switch v-model="isLogisticss" active-value="1" inactive-value="0" active-text="需要资质" inactive-text="不需要资质" class="modern-switch"/>
						</view>
					</view>
				</view>
			</view>

			<!-- 发票属性卡片 -->
			<view class="modern-card invoice-card" v-show="billinfo">
				<view class="card-header">
					<view class="header-left">
						<text class="card-title">发票属性</text>
					</view>
				</view>
				<view class="card-content">
					<tn-radio-group v-model="invoiceType" class="modern-radio-group">
						<view class="radio-item">
							<tn-radio label="0">无</tn-radio>
						</view>
						<view class="radio-item">
							<tn-radio label="1">专票</tn-radio>
						</view>
						<view class="radio-item">
							<tn-radio label="2">普票</tn-radio>
						</view>
					</tn-radio-group>
				</view>
			</view>

			<!-- 配送方式卡片 -->
			<view class="modern-card delivery-card" v-if="deliveryTypeData.length>0">
				<view class="card-header">
					<view class="header-left">
						<text class="card-title">配送方式</text>
					</view>
				</view>
				<view class="card-content">
					<SelectTags v-model="deliveryType" :items="deliveryTypeData" :multiple="false" class="modern-select-tags"/>
				</view>
			</view>

			<!-- 快递支付方式卡片 -->
			<view class="modern-card express-card" v-if="expressPayTypeData.length>0">
				<view class="card-header">
					<view class="header-left">
						<text class="card-title">快递支付方式</text>
					</view>
				</view>
				<view class="card-content">
					<SelectTags v-model="expressPayType" :items="expressPayTypeData" :multiple="false" class="modern-select-tags"/>
				</view>
			</view>

			<!-- 付款方式卡片 -->
			<view class="modern-card payment-card" v-if="paymentMethodData.length>0">
				<view class="card-header">
					<view class="header-left">
						<text class="card-title">付款方式</text>
					</view>
				</view>
				<view class="card-content">
					<SelectTags v-model="paymentMethod" :items="paymentMethodData" :multiple="false" class="modern-select-tags"/>
					<view class="collection-amount-section" v-if="isCollectionPayment">
						<view class="amount-input-wrapper">
							<view class="amount-label">
								<text>代收金额</text>
							</view>
							<tn-input
								v-model="collectionAmount"
								type="number"
								:border="true"
								placeholder="请输入金额"
								class="amount-input"
							/>
						</view>
					</view>
				</view>
			</view>

			<!-- 发票类型卡片 -->
			<view class="modern-card invoice-type-card" v-if="invoiceTypeData.length>0">
				<view class="card-header">
					<view class="header-left">
						<text class="card-title">发票类型</text>
					</view>
				</view>
				<view class="card-content">
					<SelectTags v-model="invoiceValueType" :items="invoiceTypeData" :multiple="false" class="modern-select-tags"/>
				</view>
			</view>

			<!-- 附加选项卡片 -->
			<view class="modern-card additional-card" v-if="billAddInfoData?.length>0">
				<view class="card-header">
					<view class="header-left">
						<text class="card-title">附加选项</text>
					</view>
				</view>
				<view class="card-content">
					<view class="checkbox-grid">
						<view 
							class="checkbox-item-modern"
							v-for="item in billAddInfoData" 
							:key="item.value"
						>
							<tn-checkbox 
								:model-value="checkboxValues[item.value] === '1'"
								@change="(e) => handleCheckboxChange(item.value, e)"
								class="modern-checkbox"
							>
								{{ item.label }}
							</tn-checkbox>
						</view>
					</view>
				</view>
			</view>

			<!-- 单据属性2卡片 -->
			<view class="modern-card bill-info-card" v-if="billInfoData?.length>0">
				<view class="card-header">
					<view class="header-left">
						<text class="card-title">单据属性</text>
					</view>
				</view>
				<view class="card-content">
					<view class="checkbox-grid">
						<view 
							class="checkbox-item-modern"
							v-for="item in billInfoData" 
							:key="item.value"
						>
							<tn-checkbox 
								:model-value="checkboxValues[item.value] === '1'"
								@change="(e) => handleCheckboxChange(item.value, e)"
								class="modern-checkbox"
							>
								{{ item.label }}
							</tn-checkbox>
						</view>
					</view>
				</view>
			</view>

			<!-- 收货信息卡片 -->
			<view class="modern-card receiver-card" v-show="recemaninfo">
				<view class="card-header">
					<view class="header-left">
						<text class="card-title">收货信息</text>
					</view>
				</view>
				<view class="card-content">
					<view class="receiver-form">
						<view class="form-item">
							<view class="input-label">
								<text>收货人</text>
							</view>
							<tn-input
								v-model="receiverInfo.recemannamefill"
								type="text"
								:border="true"
								placeholder="请输入收货人姓名"
								class="form-input"
							/>
						</view>
						<view class="form-item">
							<view class="input-label">
								<text>联系电话</text>
							</view>
							<tn-input
								v-model="receiverInfo.recemanmobilefill"
								type="number"
								:border="true"
								placeholder="请输入联系电话"
								class="form-input"
							/>
						</view>
					</view>
				</view>
			</view>

			<!-- 备注卡片 -->
			<view class="modern-card remark-card">
				<view class="card-header">
					<view class="header-left">
						<text class="card-title">备注</text>
					</view>
					<view class="word-count-badge">
						<text>{{remark.length}}/200</text>
					</view>
				</view>
				<view class="card-content">
					<tn-input
						v-model="remark"
						type="textarea"
						placeholder="请输入订单备注（可选）"
						height="180"
						:border="false"
						confirm-type="done"
						:show-word-limit="false"
						:maxlength="200"
						class="remark-textarea"
					/>
				</view>
			</view>
		</view>
		<template #bottom>
			<view class="modern-bottom-bar">
				<view class="price-section">
					<view class="price-label">
						<text>总金额</text>
					</view>
					<view class="price-amount">
						<text class="currency-symbol">¥</text>
						<text class="amount-value">{{shopClientInfoData.selAmount || '0.00'}}</text>
					</view>
				</view>
				<view class="action-section">
					<tn-button class="submit-order-btn" @click="doSaveSettle">
						<text class="btn-text">提交订单</text>
					</tn-button>
				</view>
			</view>
		</template>
		
		
		
		</z-paging>
	</view>
</template>

<script setup>
	import { ref,reactive,onMounted,watch, nextTick, computed } from 'vue'
	import { EventBus } from '@/mitt/EventBus.js';
	import { postCall,postPay  } from '@/api/index.js'
	import { toastMessage } from '@/utils/toast.js'
	import SelectTags from 'tnuiv3p-tn-select-tags/index.vue'
	import { v4 as uuidv4 } from 'uuid';
	import Big from 'big.js';
	import { createParams } from '@/utils/utils.js'
	import { generateUUID } from '@/utils/utils.js'
	
	const procName = "PROC_APP_DO_SHOPPING";
	// 初始化默认值
	const shopClientInfoData = reactive({});

	// 新增一个计算属性用于过滤选中的商品
	const selectedDetails = computed(() => {
		return shopClientInfoData?.details?.filter(item => item?.sel === 1) || [];
	});

	//{"label":"线上支付","value":"1"}
	const payType = ref([])
	const remark = ref('')
	const payConfig = reactive({});
	const userInfo = reactive({});

	// 新增的响应式变量
	const deliveryType = ref('');
	const expressPayType = ref('');
	const paymentMethod = ref('');
	const invoiceType = ref('');
	const invoiceValueType = ref('');
	const checkboxValues = reactive({})
	const checkboxRefs = reactive({})

	// 配送方式数据
	const deliveryTypeData = reactive([]);

	// 快递支付方式数据
	const expressPayTypeData = reactive([]);

	// 付款方式数据
	const paymentMethodData = reactive([]);

	const invoiceTypeData = reactive([]);
	const isAllBill = ref(0);
	const isPreBill = ref(0);
	const isLogistics = ref(0);
	const isLogisticss = ref(0);
	let uuid = "";
	const pagingRef = ref(null);
	let doGetPayConfig = async () =>{
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "PAYCONFIG";		
		await postCall(params).then(res=>{
			if(res){
				if(res.code===200){
					Object.assign(payConfig, res.data.DATASET[0]);
				}
			}
			
		})
	}
	onMounted(async () => {
		try {
			const tempShopClientInfo = uni.getStorageSync("SHOPCLIENTINFO");
			if (tempShopClientInfo) {
				Object.assign(shopClientInfoData, tempShopClientInfo);
			}
			
			// 初始化收货人信息
			receiverInfo.recemanname = shopClientInfoData.recemanname || '';
			receiverInfo.recemanmobile = shopClientInfoData.recetelephone || '';
			
			Object.assign(userInfo, uni.getStorageSync('USERINFO') || {});
			payType.value = [userInfo.paytype?.toString() || ''];
			
			// Initialize default values for SelectTags
			deliveryType.value = '';
			expressPayType.value = '';
			paymentMethod.value = '';
			invoiceValueType.value = '';
			
			await Promise.all([
				doGetPayType(),
				doGetPayConfig(),
				getUIInfo(),
				doGetDeliveryDict(),
				doGetPayTypeDict(),
				doGetKdPayTypeDict(),
				doGetInvoiceTypeDict(),
				doGetBillAddInfo(),
				doGetBillInfo()
			]);

			EventBus.on('shopClientInfo', (objParam) => {
				if (objParam) {
					Object.assign(shopClientInfoData, objParam);
				}
			});
		} catch (error) {
			console.error('初始化数据失败:', error);
		}
	})
	
	let back = (val) =>{
		EventBus.emit('shopClientInfo',val);
		// uni.navigateBack();
		return true;
		// uni.setStorageSync("index",2);
		// uni.navigateTo({
		// 	url: '/pages/index/index'
		// });
		// uni.setStorageSync("index",2);
		// EventBus.emit('shopClientInfo',val);
		// return false;
	}
	
	const doTurnAround = ()=>{
		uni.setStorageSync("index",1);
		uni.navigateTo({
			url: '/pages/index/index'
		});
	}
	
	const delShopping=(val,index)=>{
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "DELETE";
		params["P_ID"] = val.id;
		postCall(params).then(res=>{
			if(res){
				if(res.code===200){
					toastMessage("删除成功！");
					shopClientInfoData.details?.splice(index,1);
				}
			}
			
		})
	}
	
	let payTypeData = ref([]);
	let doGetPayType = async () =>{
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "PAYTYPE";		
		await postCall(params).then(res=>{
			if(res){
				if(res.code===200){
					payTypeData.value = res.data.DATASET;
					// Object.assign(payTypeData,res.data.DATASET);
				}
			}
			
		})
	}
	
	let doGetDeliveryDict = async () =>{
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "DELIVERYDICT";		
		await postCall(params).then(res=>{
			if(res){
				if(res.code===200){
					Object.assign(deliveryTypeData,res.data.DATASET);
					// deliveryTypeData.value = res.data.DATASET
				}
			}
			
		})
	}
	let doGetKdPayTypeDict = async () =>{
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "KDPAYTYPEDICT";		
		await postCall(params).then(res=>{
			if(res){
				if(res.code===200){
					Object.assign(expressPayTypeData,res.data.DATASET);
					// expressPayTypeData.value = res.data.DATASET;
				}
			}
			
		})
	}

	let doGetPayTypeDict = async () =>{
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "PAYTYPEDICT";		
		await postCall(params).then(res=>{
			if(res){
				if(res.code===200){
					Object.assign(paymentMethodData,res.data.DATASET);
					// paymentMethodData.value = res.data.DATASET;
				}
			}
			
		})
	}

	let doGetInvoiceTypeDict = async () =>{
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "INVOICEDICT";		
		await postCall(params).then(res=>{
			if(res){
				if(res.code===200){
					Object.assign(invoiceTypeData,res.data.DATASET);
					// invoiceTypeData.value = res.data.DATASET;
				}
			}
			
		})
	}
	const billAddInfoData = ref([]);
	const billInfoData = ref([]);

	const handleCheckboxChange = (key, e) => {
		nextTick(() => {
			checkboxValues[key] = e ? '1' : '0'
		})
	}

	let doGetBillAddInfo = async () => {
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "BILLADDINFO";		
		await postCall(params).then(res => {
			if(res && res.code === 200) {
				
				billAddInfoData.value = res.data.DATASET;
				// 初始化复选框值
				if(res.data.DATASET.length>0){
					res.data.DATASET.forEach(item => {
						checkboxValues[item.value] = '0'
					})
				}
				
			}
		})
	}
	let doGetBillInfo = async () => {
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "BILLINFO";		
		await postCall(params).then(res => {
			if(res && res.code === 200) {
				billInfoData.value = res.data.DATASET;
				// 初始化复选框值
				if(res.data.DATASET.length>0){
					res.data.DATASET.forEach(item => {
						checkboxValues[item.value] = '0'
					})
				}
				
			}
		})
	}
	
	// 新增代收金额相关变量
	const collectionAmount = ref('')
	const isCollectionPayment = ref(false)

	// 监听付款方式变化
	watch(() => paymentMethod.value[0], (newVal) => {
		if (newVal === '2') {
			isCollectionPayment.value = true;
			// 设置默认代收金额为订单金额
			collectionAmount.value = shopClientInfoData.selAmount || '0';
		} else {
			isCollectionPayment.value = false;
			collectionAmount.value = '';
		}
	});

	// 新增收货人信息
	const receiverInfo = reactive({
		recemannamefill: '',
		recemanmobilefill: ''
	});

	let doSaveSettle = async () => {
		let idList = [];
		for(let j=0;j<shopClientInfoData.details?.length;j++){
			if(shopClientInfoData.details[j]?.sel == "1"){
				idList.push(shopClientInfoData.details[j]?.id.toString());
			}
		}
		uuid = generateUUID();
		let flag = true;
		const peyTypeValue = payType.value[0];
		const receManId = shopClientInfoData.recemanid;
		const addressId = shopClientInfoData.addressid;
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "SAVE";	
		params["P_RECEMANID"] = shopClientInfoData.recemanid;
		params["P_ADDRESSID"] = shopClientInfoData.addressid;
		params["P_ADDRESS"] = shopClientInfoData.address;
		// 添加收货人信息
		params["P_RECEIVER_NAME"] = shopClientInfoData.recemanname;
		params["P_RECEIVER_PHONE"] = shopClientInfoData.recetelephone;
		params["P_REMARK"] = remark.value;
		params["P_CLIENTID"] = shopClientInfoData.businessid;
		params["P_PAYTYPE_"] = peyTypeValue;
		params["P_UUID"] = uuid;
		params["P_DHRECEMANID"] = shopClientInfoData.dhrecemanid;
		params["P_DHADDRESSID"] = shopClientInfoData.dhaddressid;
		params["P_DHADDRESS"] = shopClientInfoData.dhaddress;
		params["P_ISALLBILL"] = isAllBill.value;
		params["P_ISPREBILL"] = isPreBill.value;
		params["P_INVOICETYPE"] = invoiceType.value;
		params["P_ISLOGISTICS"] = isLogistics.value;
		params["P_IDS"] = idList.join(",");
		
		// 新增字段
		params["P_DELIVERY_TYPE"] = deliveryType.value[0];
		params["P_EXPRESS_PAY_TYPE"] = expressPayType.value[0];
		params["P_PAYMENT_METHOD"] = paymentMethod.value[0];
		params["P_INVOICE_VALUE_TYPE"] = invoiceValueType.value[0];
		// 添加代收金额参数
		if (isCollectionPayment.value) {
			params["P_COLLECTION_AMOUNT"] = collectionAmount.value;
		}
		// 动态添加复选框值
		await postCall(Object.assign(Object.assign(params,createParams(checkboxValues)),createParams(receiverInfo))).then(res=>{
			console.log(res);
			if(res){
				if(res.code===200){
					if(peyTypeValue==1 || peyTypeValue==2){
						onLineWXPay(peyTypeValue);
					}
					toastMessage("保存成功！");
					uni.setStorageSync("index",2);
					uni.navigateTo({
						url: '/pages/index/index'
					});
				}
			}
		})
	}
	
	
	let onLineWXPay = (peyTypeValue) =>{
		let params = {};
		params.cusid = payConfig.cusid;
		params.appid = payConfig.appid;
		params.version = payConfig.version;
		params.trxamt =  parseFloat(new Big(shopClientInfoData.taxamount).times(100)).toString(); //;
		params.reqsn = uuid;
		params.notify_url = payConfig.notifyurl;
		params.body = shopClientInfoData.businessname;
		params.remark = userInfo.staffid;
		if(peyTypeValue == 1){
			params.paytype = "W06";
		}else if(peyTypeValue == 2){
			params.paytype = "A02";
		}
		
		params.randomstr = uuid;
		params.signtype = payConfig.signtype;
		postPay(params).then(res=>{
			console.log(res);
			if(res){
				if(res.code===200){
					params.sign = res.data;
					var queryParams = [];
					for (var key in params) {
					  if (params.hasOwnProperty(key)) {
						var value = params[key];
					    queryParams.push(key + "=" + value);
					  }
					}
					if(peyTypeValue==1){
						plus.share.getServices(res=>{
							let sweixin = '';
							for (var i = 0; i < res.length; i++) {
								let t = res[i];
								if (t.id == 'weixin') {
								  sweixin = t;
								}
							}
							console.log(sweixin)
							if(sweixin){
								sweixin.launchMiniProgram(
									{
										id: 'gh_e64a1a89a0ad',  // 要跳转小程序的原始ID
										path: 'pages/orderDetail/orderDetail'+"?"+queryParams.join("&"),  //  可带参数
										type: 0   // 微信小程序版本类型可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。
									},
									// 目标小程序点击返回App后执行的回调，在此接收微信小程序传递的参数
									res2 => {
										console.log(typeof res2, res2)
										// res2是微信小程序传递回来的参数 类型为string 需转化为js对象使用
										let result = JSON.parse(res2)
										console.log(result) 
										// 拿到参数后执行你需要的逻辑    
										// ......   
									},
									  err2 => {
										console.log(err2)
									  }
									);
							}
						})
					} 
					if(peyTypeValue==2){
						
						let alipayUrl = null;
						 
						 if (uni.getSystemInfoSync().platform == "ios") {
							alipayUrl = 'alipay://platformapi/startapp?appId=2021001104615521';
						 }else{
							alipayUrl = 'alipays://platformapi/startapp?appId=2021001104615521';
						 }
						
						//alipayUrl 已经有? 问号了，所以这里需要进行编码
						// let params = encodeURIComponent('?'+queryParams.join("&"))
						 const query = encodeURIComponent("payinfo=" + encodeURIComponent(JSON.stringify(params)));
						
						// page=pages/index/index  跳转到支付宝小程序页面的页面路径
						alipayUrl  = `${alipayUrl}&page=pages/orderDetail/orderDetail&thirdPartSchema=&query=${query}`
						//唤起支付宝
						plus.runtime.openURL(alipayUrl);
						// window.location.href = alipayUrl;

					   console.log('跳转到支付宝小程序')
					   // uni.navigateToAlipayMiniProgram({
					   //   appId: '2021001104615521',
					   //   path: `pages/orderDetail/orderDetail&thirdPartSchema=&query=${query}`, // 要打开的小程序页面路径
					   //   success: function() {
					   //     console.log('跳转到支付宝小程序成功');
					   //   },
					   //   fail: function(error) {
					   //     console.error('跳转到支付宝小程序失败', error);
					   //   }
					   // });

					}
				}else{
					toastMessage(res.msg);
				}
			}
			
		})
	}
	
	let dhinfo = ref(true);
	let billinfo = ref(true);
	let recemaninfo = ref(true);
	const getUIInfo =()=>{
		let params = {};
		params["P_PROC_NAME"] = procName;
		params["P_ACTION"] = "UI";
		postCall(params).then(res=>{
			if(res){
				if(res.code===200){
					if(res.data.DATASET.length>0){
						dhinfo.value = (res.data.DATASET[0].dhinfo === 'TRUE');
						billinfo.value = (res.data.DATASET[0].billinfo === 'TRUE');
						recemaninfo.value = (res.data.DATASET[0].recemaninfo === 'TRUE')
						console.log(dhinfo.value);
						console.log(billinfo.value);
						
					}
				}
			}
			
		})
	}
	
	let doGetAddress = () =>{
		uni.navigateTo({
			url: '/pages/shop/address'
		});
	}
	
	let doGetDHAddress = () =>{
		uni.navigateTo({
			url: '/pages/shop/dhaddress'
		});
	}
	
	const onDeliveryChange = (e) => {
		const index = e.detail.value;
		deliveryTypeIndex.value = index;
		deliveryType.value = deliveryTypeData[index].value;
	}
	
</script>

<style scoped>
/* 简洁设计风格 */
.settle-container {
	min-height: 100vh;
	background: linear-gradient(to bottom, #f8f9ff 0%, #f0f2f9 100%);
}

/* 头部样式 */
.fixed-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	z-index: 9999;
	background-color: var(--tn-color-primary);
	box-shadow: 0 4rpx 20rpx rgba(var(--tn-color-primary-rgb), 0.15);
}

.modern-navbar-title {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.title-text {
	font-size: 32rpx;
	font-weight: 600;
	color: var(--tn-color-white, #ffffff);
}

.title-decoration {
	display: none;
}

/* 内容容器样式 */
.content-container {
	margin-top: calc(env(safe-area-inset-top) );
	padding: 12rpx;
	padding-bottom: 120rpx;
	background-color: #f5f6fa;
}

/* 简洁卡片设计 */
.modern-card {
	background: #ffffff;
	border-radius: 12rpx;
	margin-bottom: 12rpx;
	box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.04);
	overflow: hidden;
	transition: all 0.3s ease;
	position: relative;
}

.modern-card:active {
	transform: translateY(2rpx);
	box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.06);
}

/* 卡片头部设计 */
.card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16rpx;
	background: #ffffff;
	border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
}

.header-left {
	display: flex;
	align-items: center;
}

.card-title {
	font-size: 28rpx;
	font-weight: 600;
	color: #333;
	letter-spacing: 0.5rpx;
}



/* 卡片内容样式 */
.card-content {
	padding: 16rpx;
}

/* 地址信息样式 */
.address-info {
	display: flex;
	flex-direction: column;
	gap: 12rpx;
}

.contact-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 6rpx;
}

.contact-detail {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.contact-name {
	font-size: 28rpx;
	font-weight: 600;
	color: #333;
}

.contact-phone {
	font-size: 24rpx;
	color: #666;
	font-weight: 400;
}

.address-text {
	font-size: 24rpx;
	color: #666;
	line-height: 1.4;
	background: #f8f9fa;
	padding: 12rpx;
	border-radius: 8rpx;
	border: 1rpx solid #e9ecef;
}

/* 空状态样式 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12rpx;
	padding: 24rpx 0;
	opacity: 0.6;
}

.empty-text {
	font-size: 24rpx;
	color: #999;
	font-weight: 400;
}

/* 计数徽章样式 */
.count-badge, .word-count-badge {
	background: var(--tn-color-primary);
	color: white;
	padding: 6rpx 12rpx;
	border-radius: 16rpx;
	font-size: 20rpx;
	font-weight: 600;
	box-shadow: 0 2rpx 4rpx rgba(var(--tn-color-primary-rgb), 0.3);
}

/* 产品网格样式 */
.products-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 12rpx;
	margin-top: 12rpx;
}

.product-tag {
	background: #f8f9fa;
	border: 1rpx solid #e9ecef;
	border-radius: 12rpx;
	padding: 8rpx 12rpx;
	font-size: 22rpx;
	font-weight: 500;
	color: #333;
	transition: all 0.3s ease;
}

.product-tag:active {
	background: #e9ecef;
	transform: translateY(1rpx);
}

.product-name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 200rpx;
}

/* 开关网格样式 */
.switches-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12rpx;
	margin-top: 8rpx;
}

.switch-item {
	background: #f8f9fa;
	border-radius: 8rpx;
	padding: 12rpx;
	border: 1rpx solid #e9ecef;
	transition: all 0.3s ease;
}

.switch-item:active {
	background: #e9ecef;
	transform: scale(0.98);
}

.modern-switch {
	width: 100%;
}

:deep(.tn-switch) {
	margin: 0;
	width: 100%;
}

:deep(.tn-switch__label) {
	font-size: 24rpx;
	font-weight: 500;
	color: #333;
	text-align: center;
	width: 100%;
}

/* 现代化单选框组 */
.modern-radio-group {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
	margin-top: 8rpx;
}

.radio-item {
	background: #f8f9fa;
	border-radius: 8rpx;
	padding: 12rpx;
	border: 1rpx solid #e9ecef;
	transition: all 0.3s ease;
}

.radio-item:active {
	background: #e9ecef;
	transform: scale(0.98);
}

:deep(.tn-radio) {
	margin: 0;
}

:deep(.tn-radio__label) {
	font-size: 24rpx;
	font-weight: 500;
	color: #333;
}

/* 复选框网格样式 */
.checkbox-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8rpx;
	margin-top: 8rpx;
}

.checkbox-item-modern {
	background: #f8f9fa;
	border-radius: 8rpx;
	padding: 12rpx;
	border: 1rpx solid #e9ecef;
	transition: all 0.3s ease;
}

.checkbox-item-modern:active {
	background: #e9ecef;
	transform: scale(0.98);
}

.modern-checkbox {
	width: 100%;
}

:deep(.tn-checkbox) {
	margin: 0;
	width: 100%;
}

:deep(.tn-checkbox__label) {
	font-size: 24rpx;
	font-weight: 500;
	color: #333;
	text-align: center;
	width: 100%;
	line-height: 1.4;
}


:deep(.select-tags-container) {
	display: flex;
	flex-wrap: wrap;
	gap: 8rpx;
	margin-top: 8rpx;
}

:deep(.select-tag-item) {
	background: #f8f9fa;
	border: 1rpx solid #e9ecef;
	border-radius: 12rpx;
	padding: 8rpx 12rpx;
	font-size: 24rpx;
	font-weight: 500;
	color: #333;
	transition: all 0.3s ease;
	cursor: pointer;
}

:deep(.select-tag-item.active) {
	background: var(--tn-color-primary);
	color: white;
	border-color: var(--tn-color-primary);
	box-shadow: 0 2rpx 6rpx rgba(var(--tn-color-primary-rgb), 0.3);
}

/* 代收金额样式 */
.collection-amount-section {
	margin-top: 12rpx;
	padding-top: 12rpx;
	border-top: 1rpx solid #e9ecef;
}

.amount-input-wrapper {
	display: flex;
	align-items: center;
	gap: 12rpx;
	background: #f8f9fa;
	border-radius: 8rpx;
	padding: 12rpx;
	border: 1rpx solid #e9ecef;
}

.amount-label {
	font-size: 24rpx;
	font-weight: 500;
	color: #333;
	min-width: 100rpx;
}

.amount-input {
	flex: 1;
	background: white;
	border-radius: 8rpx;
	border: 1rpx solid #e9ecef;
}

/* 收货人表单样式 */
.receiver-form {
	display: flex;
	flex-direction: column;
	gap: 12rpx;
}

.form-item {
	display: flex;
	align-items: center;
	gap: 12rpx;
	background: #f8f9fa;
	border-radius: 8rpx;
	padding: 12rpx;
	border: 1rpx solid #e9ecef;
}

.input-label {
	display: flex;
	align-items: center;
	gap: 8rpx;
	font-size: 24rpx;
	font-weight: 500;
	color: #333;
	width: 140rpx;
	flex-shrink: 0;
}

.form-input {
	flex: 1;
	background: white;
	border-radius: 8rpx;
	border: 1rpx solid #e9ecef;
}

/* 备注样式 */
.remark-textarea {
	background: #f8f9fa;
	border-radius: 12rpx;
	border: 1rpx solid #e9ecef;
	font-size: 24rpx;
	color: #333;
	line-height: 1.6;
}

:deep(.tn-input__textarea-input) {
	background: transparent;
	border: none;
	outline: none;
}

/* 简洁底部操作栏 */
.modern-bottom-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(255, 255, 255, 0.98);
	border-top: 1rpx solid rgba(0, 0, 0, 0.05);
	padding: 12rpx 20rpx calc(env(safe-area-inset-bottom) + 12rpx);
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 -4rpx 24rpx rgba(0, 0, 0, 0.08);
	z-index: 997;
	backdrop-filter: blur(20px);
}

.price-section {
	display: flex;
	flex-direction: column;
	gap: 6rpx;
}

.price-label {
	font-size: 22rpx;
	color: #666;
	font-weight: 400;
}

.price-amount {
	display: flex;
	align-items: baseline;
	gap: 4rpx;
}

.currency-symbol {
	font-size: 22rpx;
	color: #ff6b6b;
	font-weight: 600;
}

.amount-value {
	font-size: 36rpx;
	color: #ff6b6b;
	font-weight: 700;
	letter-spacing: 1rpx;
}

.action-section {
	flex-shrink: 0;
}

.submit-order-btn {
	background: linear-gradient(135deg, #00b894 0%, #00a085 100%);
	border: none;
	border-radius: 32rpx;
	height: 68rpx;
	padding: 0 28rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4rpx 12rpx rgba(0, 184, 148, 0.3);
	transition: all 0.3s ease;
}

.submit-order-btn:active {
	transform: translateY(2rpx);
	box-shadow: 0 2rpx 8rpx rgba(0, 184, 148, 0.3);
}

.btn-text {
	font-size: 28rpx;
	font-weight: 600;
	color: white;
	letter-spacing: 1rpx;
}

/* 响应式设计 */
@media screen and (max-width: 768rpx) {
	.content-container {
		padding: 12rpx;
	}
	
	.modern-card {
		margin-bottom: 16rpx;
	}
	
	.card-header, .card-content {
		padding: 16rpx;
	}
	
	.switches-grid, .checkbox-grid {
		grid-template-columns: 1fr;
		gap: 12rpx;
	}
	
	.modern-bottom-bar {
		flex-direction: column;
		gap: 16rpx;
		align-items: stretch;
		padding: 12rpx 16rpx calc(env(safe-area-inset-bottom) + 12rpx);
	}
	
	.submit-order-btn {
		width: 100%;
		justify-content: center;
	}
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
	.settle-container {
		background: linear-gradient(to bottom, #1a1a2e 0%, #16213e 100%);
	}
	
	.modern-card {
		background: #2a2a3e;
		border: 1rpx solid #333;
	}
	
	.card-header {
		background: #2a2a3e;
		border-bottom-color: rgba(255, 255, 255, 0.1);
	}
	
	.card-title, .contact-name {
		color: #ffffff;
	}
	
	.contact-phone, .address-text {
		color: #ccc;
	}
	
	.switch-item, .radio-item, .checkbox-item-modern,
	.form-item, .amount-input-wrapper {
		background: #2a2a3e;
		border-color: #333;
	}
	
	.modern-bottom-bar {
		background: rgba(28, 28, 30, 0.98);
		border-top-color: rgba(255, 255, 255, 0.1);
	}
}
</style>

